<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>是否录入积极分子查询系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 引入样式 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.0/theme-chalk/index.css" rel="stylesheet">
    <!-- 引入组件库 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.0/index.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
</head>
<style>
    @media screen and (max-width: 750px) {
        .el-message-box {
            width: 60% !important;
        }
    }
</style>
<body style="background-color: #5c0001;">
    <div id="content" style="background-color: #5C0001;">
        <div>
            <img src="img/bg233.png" style="width: 100%" />
        </div>
        <div style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
            <el-card class="box-card" style="width: 90%;margin-top: 20px;">
                <div style="display: flex;flex-direction: column;justify-content: center;align-items: flex-start;">
                    <span style="margin: 10px;">姓名:</span>
                    <el-input v-model="form.name" autocomplete="off" placeholder="请输入姓名" ></el-input>
                </div>
                <div style="display: flex;flex-direction: column;justify-content: center;align-items: flex-start;">
                    <span style="margin: 10px;">班级:</span>
                    <el-input v-model="form._class" autocomplete="off" placeholder="请输入班级"></el-input>

                </div>
                <div v-if="grade_show" style="display: flex;flex-direction: row;justify-content: center;margin: 10px;">
                    <span :style="{ color: activeColor}" style="font-size: 20px;">{{tips}}</span>
                </div>
                <div style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
                    <el-button @click="getData" type="danger" icon="el-icon-search" circle style="margin: 10px;"></el-button>
                </div>
            </el-card>
            <div style="color:white;">
                <p>power by xiaoxi</p>
            </div>
        </div>
    </div>

    <script>
        var app = new Vue({
            el: '#content',
            data: {
                form:{
                    name:"",
                    _class:""
                },
                stu: {grade:""},
                grade_show:false,
                tips:"您不在入党积极分子名单中",
                activeColor:''
            },
            mounted:function(){

            },
            methods:{
                getData:function(){
                    app.grade_show=true;
                    app.activeColor="red";
                    // axios.get('getStudentPositive',{
                    //     params: {
                    //         name:app.form.name,
                    //         _class:app.form._class
                    //     }
                    // })
                    //     .then(res => {
                    //         console.log('数据是:', res);
                    //         app.stu=res.data.data;
                    //         if(res.data.data==null){
                    //             this.$alert('没找到相关信息，可能是您的班级填写错误，请仔细检查，18级17级格式是XX级专业名称本科X班，19级是X级专业名称X班。', '查询为空', {
                    //                 confirmButtonText: '确定',
                    //                 callback: action => {
                    //                 }
                    //             });
                    //         }else{
                    //             app.grade_show=true;
                    //             if(app.stu.grade == "缺考"){
                    //                 app.tips="";
                    //                 app.activeColor='red';
                    //             }
                    //             if(parseInt(app.stu.grade) >=60){
                    //                 app.tips="恭喜你！考核通过！希望你能够一直保持初心！";
                    //                 app.activeColor="lightgreen";
                    //             }
                    //             if(parseInt(app.stu.grade) <60){
                    //                 app.tips="/(ㄒoㄒ)/~~ 还得继续加油哦！";
                    //                 app.activeColor="red";
                    //             }
                    //         }
                    //
                    //     })
                    //     .catch((e) => {
                    //         console.log('获取数据失败');
                    //     });
                },
                goto:function(item){
                    window.open('upload.html?id='+item.id);
                },
            }
        })
    </script>
</body>
</html>